<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j component-pagination">
    <div
      v-if="pages > 1"
      class="pages"
    >
      <a
        href="javascript:void(0);"
        class="item prev"
        :class="{ default: modelValue <= 1 }"
        @click="changePage(modelValue - 1)"
      >{{ $t('pagination.previousPage') }}</a>
      <div
        v-for="(item, index) in rainbow"
        :key="index"
      >
        <a
          v-if="item !== '...'"
          href="javascript:void(0);"
          class="item"
          :class="{ cur: modelValue === item }"
          @click="changePage(item)"
        >{{ item }}</a>
        <span
          v-else
          class="ellipsis"
        >...</span>
      </div>
      <a
        href="javascript:void(0);"
        class="item next"
        :class="{ default: modelValue > pages - 1 }"
        @click="changePage(Number(modelValue) + 1)"
      >{{ $t('pagination.nextPage') }}</a>
      <div class="go-page">
        {{ $t('pagination.goTo') }}
        <input
          v-model.number="goCurrent"
          type="text"
          class="page-input"
          @input="goCurrent = Number($event.target.value.replace(/\D+/, ''))"
        >{{ $t('pagination.page') }}
        <a
          href="javascript:void(0);"
          class="page-btn"
          @click="changePage(goCurrent)"
        >GO</a>
      </div>
      <div class="total-num">
        {{ $t('pagination.total') }}
        <span class="num">{{ pages }}</span>{{ $t('pagination.page') }}
      </div>
    </div>
  </div>
</template>

<script setup>
import * as PageUtil from '@/utils/pageUtil.js'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    default: 1,
    type: [Number, String]
  },
  pages: {
    default: 1,
    type: Number
  },
  // 每屏展示的页数
  displayCount: {
    default: 5,
    type: Number
  }
})
const emit = defineEmits(['input', 'changePage', 'update:modelValue'])

const goCurrent = ref('')

const rainbow = computed(() => {
  return PageUtil.rainbowWithDot(props.modelValue, props.pages, 5)
})

const changePage = (current) => {
  if (current === '' || current === 0) {
    goCurrent.value = ''
    return
  }
  current = parseInt(current)
  if (current > props.pages && props.pages) {
    ElMessage({
      message: $t('pagination.pageof') + ' ' + props.pages + ' ' + $t('pagination.page'),
      type: 'warning',
      duration: 1000
    })
    goCurrent.value = ''
    return
  }
  if (current < 1) {
    return
  }
  emit('update:modelValue', current)
  emit('changePage', current)
  goCurrent.value = ''
}

</script>

<style lang="scss" scoped>
</style>
